<template>
	<view class="category-content">
		<narvBarSearch titleColor="#fff" titleText="分类"></narvBarSearch>
		<searchBarTab></searchBarTab>
		<view class="category-content-page">
			<scroll-view class="category-aside" scroll-y>
				<template v-for="(item,index) in catergoryList" :key="item">
					<view class="category-aside-title " :class="{active:selectIndex===index}" @click="catergorySelect(index)" > {{item.title}}</view>
					</template>
			</scroll-view>
			<scroll-view class="category-menu" scroll-y :scroll-top="moveDistance" scroll-with-animation @scroll="onMainScroll">
				
				<view class="category-menu-box">
					<template v-for="(item,index) in catergoryList" :key="item">
						<view class="category-box" :id="`moudle${index}`"> 
						<view class="title">{{item.title}}</view>
						<template v-for="(goods,index) in item.children" :key="goods">
							
						<goodsCardInfo :goods="goods" :type="0" @toastgoods="goodsToast"></goodsCardInfo>
						</template>
						</view>
					</template>
				</view>
			</scroll-view>
		
			<view class="category-bottom">
				<view class="goods-car" @click="showBuyCar" >
					<image src="/static/images/imgIcons/购物车.svg" mode=""></image>
					<view class="ico">
						{{buyCarlength}}
					</view>
				</view>
				<view class="total-price">
					<text class="total-price-title">合计:</text>
					<text class="total-price-money">￥{{formatNum(totalPrice,{numb:2})}}</text>
					
				</view>
				<view class="pay-button">
					<button >去结算</button>
					
					
				</view>
			</view>
		</view>
	<view class="popToast">
		<uni-popup ref="goodsInfo" type="bottom" background-color="#fff" class="popupB"  @mask-click="handleMaskClick">
			
			<popupCarContent  :typeChoice="typeChoice" :buyPosition="buyPosition" :type="typeValue"
			@reduce-count="reduceNum"
			@boost-count="enhanceNum"
			@join-shopCar="addShopCar"
			
			></popupCarContent>
		</uni-popup>
	</view>
	
	</view>
</template>

<script setup>
	import {computed, nextTick, ref,onMounted, reactive}from'vue'
	import narvBarSearch from '@/components/narv-bar-search.vue';
	import searchBarTab from '../../components/search-bar-tab.vue';
	import { formatNum } from '../../utils/numbformat';
	import { WINDOW_INFO_CONTENT } from '../../utils/config';
	import { topContentHight } from '../../utils/narvData';
	import goodsCardInfo from '../../components/goods-card-info.vue';
	import popupCarContent from '../../components/popup-car-content.vue';
	import { useShopeList } from '../../store/shopData/useShop';
	
	const typeValue=ref(0)
	
	
	//商品信息
	const catergoryList=ref([
  {
    "title": "小猫系列",
    "children": [
      {
        "id": "cat_5x9y2z",
        "img": "/static/images/goods.jpg",
        "introduce": "百度翻译是一款领先的AI大模型翻译",
        "information": "小猫：可爱",
        "typeinfo": "非常可爱",
        "price": 9999,
        "oldPrice": 999900,
        "isSelect": false
      },
      {
        "id": "cat_8a7b6c",
        "img": "/static/images/goods.jpg",
        "introduce": "百度翻译是一款领先的AI大模型翻译",
        "information": "小猫：可爱",
        "typeinfo": "非常可爱",
        "price": 9999,
        "oldPrice": 999900,
        "isSelect": false
      },
      {
        "id": "cat_3m4n5p",
        "img": "/static/images/goods.jpg",
        "introduce": "百度翻译是一款领先的AI大模型翻译",
        "price": 9999,
        "oldPrice": 999900,
        "isSelect": false
      }
    ],
    "isSelect": false
  },
  {
    "title": "小狗系列",
    "children": [
      {
        "id": "dog_q1w2e3",
        "img": "https://picsum.photos/300/300?random=1",
        "introduce": "可爱的小狗玩偶，适合所有年龄段",
        "information": "小狗：忠诚",
        "typeinfo": "非常忠诚",
        "price": 7999,
        "oldPrice": 89900,
        "isSelect": false
      },
      {
        "id": "dog_r4t5y6",
        "img": "https://picsum.photos/300/300?random=2",
        "introduce": "高品质小狗玩具，耐咬耐磨",
        "information": "小狗：活泼",
        "typeinfo": "非常活泼",
        "price": 5999,
        "oldPrice": 69900,
        "isSelect": false
      },
      {
        "id": "dog_u7i8o9",
        "img": "https://picsum.photos/300/300?random=3",
        "introduce": "小狗造型抱枕，舒适柔软",
        "price": 2999,
        "oldPrice": 39900,
        "isSelect": false
      }
    ]
  },
  {
    "title": "小熊系列",
    "children": [
      {
        "id": "bear_a1s2d3",
        "img": "https://picsum.photos/300/300?random=4",
        "introduce": "泰迪熊玩偶，经典款式",
        "information": "小熊：温暖",
        "typeinfo": "非常温暖",
        "price": 8999,
        "oldPrice": 99900,
        "isSelect": false
      },
      {
        "id": "bear_f4g5h6",
        "img": "https://picsum.photos/300/300?random=5",
        "introduce": "北极熊造型水杯，环保材质",
        "information": "小熊：可爱",
        "typeinfo": "非常可爱",
        "price": 3999,
        "oldPrice": 49900,
        "isSelect": false
      }
    ]
  },
  {
    "title": "兔子系列",
    "children": [
      {
        "id": "rabbit_j1k2l3",
        "img": "https://picsum.photos/300/300?random=6",
        "introduce": "长耳兔毛绒玩具，超柔软",
        "information": "兔子：温顺",
        "typeinfo": "非常温顺",
        "price": 6999,
        "oldPrice": 79900,
        "isSelect": false
      },
      {
        "id": "rabbit_z4x5c6",
        "img": "https://picsum.photos/300/300?random=7",
        "introduce": "兔子造型夜灯，温馨暖光",
        "price": 4999,
        "oldPrice": 59900,
        "isSelect": false
      }
    ]
  },
  {
    "title": "熊猫系列",
    "children": [
      {
        "id": "panda_v1b2n3",
        "img": "https://picsum.photos/300/300?random=8",
        "introduce": "国宝熊猫玩偶，限量版",
        "information": "熊猫：稀有",
        "typeinfo": "非常稀有",
        "price": 12999,
        "oldPrice": 149900,
        "isSelect": false
      },
      {
        "id": "panda_m4q5w6",
        "img": "https://picsum.photos/300/300?random=9",
        "introduce": "熊猫造型马克杯，创意设计",
        "information": "熊猫：可爱",
        "typeinfo": "非常可爱",
        "price": 3599,
        "oldPrice": 45900,
        "isSelect": false
      }
    ]
  },
  {
    "title": "恐龙系列",
    "children": [
      {
        "id": "dino_e1r2t3",
        "img": "https://picsum.photos/300/300?random=10",
        "introduce": "霸王龙模型，仿真设计",
        "information": "恐龙：威猛",
        "typeinfo": "非常威猛",
        "price": 15999,
        "oldPrice": 179900,
        "isSelect": false
      },
      {
        "id": "dino_y4u5i6",
        "img": "https://picsum.photos/300/300?random=11",
        "introduce": "三角龙儿童书包，轻便耐用",
        "price": 8999,
        "oldPrice": 99900,
        "isSelect": false
      }
    ]
  }
])
	
	
	const useShop=useShopeList()
	//计算商品展示区域
	
	const showGoodsheight=computed(()=>{
		let tabBarH=0
		// #ifdef H5
		tabBarH=50
		//#endif
		return `${WINDOW_INFO_CONTENT.windowHeight-topContentHight.value-uni.rpx2px(90)-tabBarH-uni.rpx2px(100)}px`
	})
	
//适配不同的设备设置购物栏位置
const buyPosition=computed(()=>{
	
	// #ifdef H5
return 50+'px'
     //#endif
return 0 +'px'
	
})
const typeChoice=ref(['可爱可爱可爱','喵喵喵喵','哇卡卡卡'])

	//商品分类选中
	const selectIndex=ref(0)
	
	//滚动距离
	const moveDistance=ref(0)
	//底部弹窗
	const goodsInfo=ref()
	
	
	//商品数量
	const goodsNum=ref(0)
	
	//购物车商品数量
	const buyCarlength=computed(()=>useShop.buyCarList.length)
	
	//商品信息弹窗
	function goodsToast(goods)
	{
		typeValue.value=0
		useShop.goodsI=JSON.parse(JSON.stringify(goods))
		useShop.goodsI.goodsNum=1;
		goodsInfo.value.open()
		
	}
	
	
	//添加购物车
	function addShopCar(){
	
			if(useShop.buyCarList.length===0)
			{
			console.log('hhh1');	
				useShop.buyCarList.push(useShop.goodsI)}
			else{
				const sameId= useShop.buyCarList.find(item => item.id === useShop.goodsI.id&&item.choose===useShop.goodsI.choose)
					if(!sameId)
					 useShop.buyCarList.push(useShop.goodsI)
					 else
					 {
						 useShop.buyCarList.forEach((item)=>
						 {
							 if(item.id===sameId.id&&item.choose===useShop.goodsI.choose)
							 sameId.goodsNum += useShop.goodsI.goodsNum; 
						 })
						
						
					 }
					     
				  }
				
			
		
		
		buyCarlength.value=useShop.buyCarList.length
		if(buyCarlength.value>99)
		buyCarlength.value='99+'
		goodsInfo.value.close()
	}
	const topDistance=()=>{
		let topH=0;
		catergoryList.value.forEach((item,index)=>{
			const viewNode=uni.createSelectorQuery().select(`#moudle${index}`)
		
			viewNode.fields({size:true}, data=>{
				item.top=Math.floor(topH)
				console.log(data);
				topH+=data.height
				
			}).exec()
		})
	}
	
	const onMainScroll=(e)=>{
		let scrollTop=e.detail.scrollTop;
		let results=catergoryList.value.filter(item=>item.top<scrollTop+2)
		if(results.length>0)selectIndex.value=results.length-1
	}
	//商品类别
	function catergorySelect(index)
	{
		selectIndex.value=index;
		moveDistance.value=catergoryList.value[index].top
		
	}
	
	//点击购物车
	function showBuyCar(){
	goodsInfo.value.open()
	typeValue.value=1
	}
	
	//商品数量减少
	function reduceNum(){
		if(useShop.goodsI.goodsNum===0)
		return
		useShop.goodsI.goodsNum--
		
	}
	//商品数量增加
	function enhanceNum(){
		console.log("买票");
		useShop.goodsI.goodsNum++
		
	}
	//总金额
	const totalPrice=computed(()=>{
		let price=0
		useShop.buyCarList.forEach((item)=>{
			price+=item.price*item.goodsNum
		})
		return price
	})
	onMounted(() => {
	  nextTick(() => {
	    setTimeout(() => { // 加 setTimeout 确保 scroll-view 内容渲染
	      topDistance();
	    }, 2000);
	  });
	});
	
	
</script>


<style lang="scss" scoped>
	.category-content {
	
	.category-content-page{
		height: v-bind(showGoodsheight);
		
		padding:20rpx 0rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.category-aside{
			width: 200rpx;
			height: 100%;
			text-align: center;
			
			.category-aside-title{
				width: 100%;
				height: 108rpx;
				line-height: 108rpx;
				font-size: 34rpx;
				color: rgba(51, 51, 51, 1);
				position: relative;
				&.active{
					color: pink;
					&::after{
						content: "";
						display: block;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 8rpx;
						height: 35rpx;
						background-color: pink;
					}
				}
				
			}
		}
		.category-menu{
			width: 552rpx;
			height: 100%;
			padding-left: 34rpx;
			.category-menu-box{
				//粘性定位需要父级内容是滚动的，且对应元素要设置top和left，并且需要设置层级，否则会被覆盖
				.title{
					height:90rpx;
					line-height: 90rpx;
					color: rgba(136, 136, 136, 1);
					position: sticky;
					background-color: #fff;
					top:0rpx;
					left:0rpx;
					z-index: 1;
				}
				.category-goods{
					display: flex;
					justify-content: flex-start;
					margin-bottom: 20rpx;
						gap: 18rpx;
					.goods-img{
						width: 180rpx;
						height: 180rpx;
						flex-shrink: 0;
						image{
							width: 180rpx;
							height: 180rpx;
						}
					}
					.goods-info{
						flex: 1;
					
							
						.goods-title{
							@include text-ellipsis(1);
						}
						.goods-type{
							font-size: 22rpx;
							
							color: rgba(153, 153, 153, 1);
							text{
								padding-right: 10rpx;
							}
						}
						.price-button{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.goods-price{
								display: flex;
								flex-direction: column;
								align-items: center;
							}
							.now-price{
								font-size: 36rpx;
								font-weight: 500;
								color:  rgba(255, 15, 35, 1);
							}
							.old-price{
								font-size: 20rpx;
								   text-decoration: line-through;
								  color: rgba(187, 187, 187, 1);
								
							}
							button{
								width: 102rpx;
								height: 40rpx;
								border-radius: 16rpx;
								font-size: 23rpx;
								line-height: 40rpx;
								color: rgba(255, 255, 255, 1);
								background-color: pink;

							}
						}
					}
					
				}
				
			}
		}
		.category-bottom{
			z-index: 2;
			position: fixed;
			width: 100%;
			height: 100rpx;
			bottom:v-bind(buyPosition);
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			background-color: pink;
			padding: 0 34rpx;
			.goods-car{
				width: 112rpx;
				height: 112rpx;
				position: relative;
				background-color: #f4e1ff;
				border-radius: 50%;
				image{
					width: 100%;
					height: 100%;
					
				}
				.ico{
					font-size: 25rpx;
					display: block;
					position: absolute;
					right: 0;
					top:0;
					width: 40rpx;
					height: 40rpx;
					color: #fff;
					text-align: center;
					line-height: 40rpx;
					background-color: red;
					border-radius: 50%;
					
				}
			}
			.total-price{
				padding-left: 13rpx;
				flex: 1;
				.total-price-title{
					font-size: 23rpx;
					color: #fff;
				}
				.total-price-money{
					font-size: 40rpx;
					color:rgba(255, 255, 255, 1) ;
					font-weight: 400;
				}
			}
			.pay-button{
				width: 210rpx;
				height: 66rpx;
				margin-right: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				button{
					background-color: #fff;
					color: pink;
					border-radius: 40rpx;
				}
				
			}
		}
	}
		
	// .popToast{
	// 	width: 100%;
	// 	height:1846rpx;
	// 	border-radius: 25rpx 25rpx 0 0;
	// 	overflow: hidden;
	// 	background-color: #ff1111;
	// }
	
	
	}
	  :deep( .popupB .uni-popup__wrapper) {
	     border-radius: 25rpx 25rpx 0 0 !important;
	     overflow: hidden;
	   }    
</style>